<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<c:set var="user" value="${sessionScope.user}"/>
<!DOCTYPE html>
<html>

<head>
  <title>会员中心</title>
</head>

<body>
<div class="myaccount">
  <div class="row">
    <div class="ucenter">
      <div class="ucenter-info mt10">
        <div class="info-title">
          <h5 style="display: inline-block;">会员中心</h5>
        </div>
        <div class="info">
          <ul class="info-img">
            <li><img src="${path}/avatar/${user.headUrl}" class="avatar" /></li>
          </ul>
          <div class="info-main">
            <%--特权信息--%>
            <div id="privilege_list"></div>
            <div class="row">
              <button id="btn_privilege" class="BUTTON" type="button" style="height: 30px;margin-right: 5%;">优惠券详情</button>
            </div>
            <div id="privilege_div3" style="display: none; margin-left: -20%;">
              <div class=" myaccount-table table-responsive text-center">
                <table class="table table-bordered">
                  <thead class="thead-light">
                  <tr style="line-height: 6px;">
                    <th>优惠券名</th>
                    <th>可抵用价格</th>
                    <th>消耗积分</th>
                    <%--<th>备注</th>--%>
                    <th>领取</th>
                  </tr>
                  </thead>
                  <%--优惠券详情--%>
                  <tbody id="coupon_tbody" ></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="clear">
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  $(document).ready(function() {
    var user="<%=session.getAttribute("user")%>";
    var uid = ${user.id};
    console.log(uid);

    //显示特权页面的个人信息
    $.ajax({
      type: 'POST',
      url: '/member/info',
      dataType: "json",
      data: {id:uid},
      error: function () {
        console.log("失败");
      },
      success: function (result) {
        var str = "";
        var sign = "";
        console.log(result);

        str += '<div class="row">';
        str += '    <label>会员等级：</label>'+ result.memberLevel +'';
        str += '    <button id="openvip" class="BUTTON" style="height: 30px;margin-left: 5%;">'+ result.action +'</button>';
        str += '    <input id="sign" value="" class="BUTTON" type="button" style="margin-left: 10%; height:30px;float: right;width: 10%;color: inherit;"/>';
        str += '</div>';
        str += '<div class="row">';
        str += '    <label>到期时间：</label>'+ result.endDate +'';
        str += '</div>';
        str += '<div class="row">';
        str += '    <label>用户名：</label>${user.username}';
        str += '</div>';
        $('#privilege_list').html(str);

        console.log(result.signIn);
        if(result.signIn == "false") {
          $("#sign").val("已签到");
          $("#sign").click(function() {
            alert("已签到，不能重复签到");
          });
        } else {
          $("#sign").val("签到");
          $("#sign").click(function() {
            $.ajax({
              type: 'POST',
              url: '/member/signIn',
              dataType: "json",
              data: {id:uid},
              error: function () {
                console.log("失败");
              },
              success: function (result) {
                var sign = result.action;
                if(sign == true) {
                  $("#sign").val("已签到");
                }
              }
            });
          });
        }
        //开通VIP
        $("#openvip").click(function() {
          if(confirm('确定要开通或续费VIP吗?')) {
            $.ajax({
              type: 'POST',
              url: '/member/topUp',
              dataType: "json",
              data: {id:uid},
              error: function () {
                console.log("失败");
              },
              success: function (result) {
                console.log(result);
                window.location.reload();
              }
            });
            return true;
          }
          return false;
        });
      }
    });

    //显示优惠券详情
    $("#btn_privilege").click(function() {
      //显示优惠券
      $.ajax({
        type: 'POST',
        url: '/member/coupon',
        dataType: "json",
        data: {id:uid},
        error: function () {
          console.log("失败");
        },
        success: function (result) {
          if(result == null) {
            alert("暂无可领取的优惠券，请开通VIP");
          } else {
            if(result.length == 0) {
              alert("很抱歉暂时没有优惠券活动");
            } else {}

            $("#privilege_div3").toggle();
            var str = '';
            for (var key in result) {
              console.log(result);
              str += '<tr>';
              str += '  <td>'+ result[key].itemName +'</td>';
              str += '  <td>'+ result[key].price +'</td>';
              str += '  <td>'+ result[key].credit +'</td>';
//              str += '  <td>'+ result[key].remark +'</td>';
              str += '  <td><input id="'+ result[key].id +'" type="button" value="领取" style="width: 60px;color: inherit;"></td>';
              str += '</tr>';
            }
            $('#coupon_tbody').html(str);
            $("#coupon_tbody input").click(function() {
              var itemID = $(this).attr('id');   //获设置选中的
              console.log(itemID);
              $.ajax({
                type: 'POST',
                url: '/member/getCoupon',
                dataType: "json",
                data: {id: uid, cId: itemID},
                error: function () {
                  console.log("失败");
                },
                success: function (result) {
                  console.log(result.result);
                  if (result.result == "领取失败!") {
                    alert("积分不足，无法领取!");
                  } else if (result.result == "领取成功!") {
                    alert("领取成功!");
                  }
                }
              });
            });
          }
        }
      });
    });
  });
</script>
<style>
  .BUTTON {
    background: #3D608F;
    color: #FFFFFF !important;
    border: 1px solid #3D608F;
    border-radius: 15px;
  }
</style>
</html>
